$(function () {
    var obj = {
        a:{
            1:{
                11:{
                    12:0,72:0},
                12:{
                    15:0,52:0},
            },

            2:{
                12:{
                    19:0}},
            3:{
                13:{
                    16:0}}},
        b:{
            4:{
                14:{
                    124:0}},
            5:{
                15:{
                    42:0}},
            6:{
                16:{
                    62:0}}},
        c:{
            7:{
                17:{
                    92:0}},
            8:{
                18:{
                    22:0}},
            9:{
                19:{
                    12:0}}},
    };
    $("#city").hide();
    $("#street").hide();
    for(var h in obj){
        var txt1 = "<button class='list-group-item'>" + h + "</button>";
        $("#country").append(txt1);
    }
    $("#country button").click(function () {
        var index = this.innerHTML;
        var data = obj[index];
        $("#list1").empty();
        (function render(obj) {
            for (var i in obj) {
                var txt1 = "<button class='list-group-item'>" + i + "</button>";
                $("#list1").append(txt1);

            }
        })(data);
        $("#list2").hide();
        $("#list3").hide();
        $("#city").hide();
        $("#street").hide();
        $("#addCity").hide();
        $("#addStreet").hide();

        $("#list1 button").click(function () {
            var index1 = this.innerHTML;
            var data1 = data[index1];
            $("#list2").empty();
            for (var j in data1) {
                var txt1 ="<button class='list-group-item'>" + j + "<span class='glyphicon glyphicon-trash remCity' style='float: right;'></span></button>";
                $("#list2").append(txt1);
                $("#list2").show();
                $("#list3").hide();
                $("#street").hide();
                $("#city").show();
                $("#addStreet").hide();
            }

        $("#list2 button").click(function () {
            var index2 = $(this).text();
            var data2 = data1[index2];
            $("#list3").empty();
            $("#street").show();
            $("#list3").show();
            for (var x in data2) {
                var txt3 = "<button class='list-group-item'>" + x + "<span class='glyphicon glyphicon-trash remParent' style='float: right;'></span></button>";
                $("#list3").append(txt3);
            }

            $("#list3 button").click(function () {
            $(".remParent").click(function () {
                $(this).parent().remove();
            })
            })
            $(".remCity").click(function () {
                $(this).parent().remove();
                $("#list3").hide();
            })

        })

        })



    })
    $("#city").click(function () {
        $("#addCity").toggle();
    })
    $("#street").click(function () {
        $("#addStreet").toggle();
    })
    $("#btnCity").click(function () {
        var citytVal = $("#cityText").val();
        if(citytVal != ""){
            var txt = "<button class='list-group-item'>" + citytVal + "<span class='glyphicon glyphicon-trash remCity' style='float: right;'></span></button>";
            $("#list2").append(txt);
        }
        document.getElementById("cityText").value="";
    })
    $("#btnStreet").click(function () {
        var streetVal = $("#streetText").val();
        if(streetVal != ""){
            var txt = "<button class='list-group-item'>" + streetVal + "<span class='glyphicon glyphicon-trash remParent' style='float: right;'></span></button>";
            $("#list3").append(txt);

        }
        document.getElementById("streetText").value = "";
    })
})
